<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>提交订单</title>
    <link rel="stylesheet" type="" href="../css/icons/iconfont.css">
    <link rel="stylesheet" type="" href="../css/reset.css">
    <link rel="stylesheet" type="" href="../css/submit.css">
    <link rel="stylesheet" type="" href="../css/head.css">
    <link rel="stylesheet" type="" href="../css/footer.css">
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="logo">
            <a href="../index.html"><img src="../images/logo.png" alt="我要去印"></a>
        </div>
        <div class="iconmenu">
            <input type="text" value="" placeholder="搜索">
            <i class="iconfont icon-sousuo"></i>
        </div>
        <div class="message">
            <i class="iconfont icon-xiaoxi"></i>
            <p>12</p>
        </div>
        <div class="user-info">
            <img src="../images/menuUserinfoHeadkey.jpg" alt="">
            <div class="triangle-bottom"></div>
            <div class="all-info">
                <p><i class="iconfont icon-zhuye"></i>我的主页</p>
                <p><i class="iconfont icon-dingdan"></i>我的订单</p>
                <p><i class="iconfont icon-tuichu"></i>退出</p>
            </div>
        </div>

    </header>
    <!-- 订单区域 -->
    <div class="order"><img src="../images/submit-order.jpg" alt=""></div>
    <!-- 模板容器区域 -->
    <div class="container">
        <div class="sbt-text">模板</div>
        <div class="sbt-content">
            <div class="sbt-img"><img src="../images/myOrderImg.jpg" alt=""></div>
            <div class="sbt-info">
                <p class="text">注意文字限制两行 蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工</p>
                <p class="price"> <span>129</span> 点券</p>
                <button>重新选择模板</button>
            </div>
            <p class="choose">工艺选择</p>
        </div>
        <!-- 模板样式 -->
        <div class="modality">
            <!-- 版本 -->
            <div class="typeOf">
                <span>版式:</span>
                <div class="vertical">
                    <div class="rectangle"></div>
                    <p>竖版</p>
                </div>
                <div class="horizontal">
                    <div class="square"></div>
                    <p>横版</p>
                </div>
            </div>
            <!-- 尺寸 -->
            <div class="size">
                <span>尺寸:</span>
                <div class="standard">
                    <div class="norm"></div>
                    <p>标准</p>
                    <p>85x54 mm</p>
                </div>
                <div class="medium">
                    <div class="middle"></div>
                    <p>中号</p>
                    <p>100x70 mm</p>
                </div>
                <div class="largeSize">
                    <div class="big"></div>
                    <p>大号</p>
                    <p>120x80 mm</p>
                </div>
                <div class="extra-large">
                    <div class="extra"></div>
                    <p>特大</p>
                    <p>140x100 mm</p>
                </div>
            </div>
            <!-- 孔位 -->
            <div class="kongwei">
                <span>孔位:</span>
                <div class="singlem">
                    <div class="middle"></div>
                    <p>单圆孔居中</p>
                </div>
                <div class="singlel">
                    <div class="left"></div>
                    <p>单圆孔居左</p>
                </div>
                <div class="singler">
                    <div class="right"></div>
                    <p>单圆孔居右</p>
                </div>
                <div class="double">
                    <div class="bicircle"></div>
                    <p>双圆孔</p>
                </div>
                <div class="single">
                    <div class="single-defeat"></div>
                    <p>单肩孔</p>
                </div>
                <div class="merge">
                    <div class="merge-defeat"></div>
                    <p>双圆孔+单肩孔</p>
                </div>
            </div>
            <!-- 单选框 -->
            <div class="radiobox">
                <div class="film">
                    <span>过膜:</span>
                    <input type="radio" checked name="film" class="oneipt"><span class="txt">光膜</span>
                    <input type="radio" name="film" class="twoipt"><span class="txt">磨砂</span>
                </div>
                <div class="thickness">
                    <span>厚度:</span>
                    <input type="radio" checked name="thickness" class="oneipt"><span class="txt">标准0.76mm</span>
                    <input type="radio" name="thickness"><span class="txt">加厚0.98mm</span>
                </div>
                <div class="breadth">
                    <span>挂绳宽度:</span>
                    <input type="radio" checked name="breadth" class="oneipt"><span class="txt">1cm</span>
                    <input type="radio" name="breadth"><span class="txt">2cm</span>
                </div>
                <div class="type">
                    <span>挂绳扣类型:</span>
                    <input type="radio" checked name="type" class="oneipt"><span class="txt">双瓜子扣</span>
                    <input type="radio" name="type"><span class="txt">单圆扣(金属)</span>
                    <input type="radio" name="type"><span class="txt">单肩扣(金属)</span>
                    <input type="radio" name="type"><span class="txt">单肩扣(塑料)</span>
                </div>
                <div class="ferrule">
                    <span>卡套:</span>
                    <input type="radio" checked name="ferrule" class="oneipt"><span class="txt">双瓜子扣</span>
                    <input type="radio" name="ferrule"><span class="txt">单圆扣(金属)</span>
                    <input type="radio" name="ferrule"><span class="txt">单肩扣(金属)</span>
                    <input type="radio" name="ferrule"><span class="txt">单肩扣(塑料)</span>
                </div>
                <div class="text">
                    <span>挂绳文字:</span>
                    <textarea  placeholder="想印刷什么就印什么,限40字符吧" maxLength="40"></textarea>
                </div>
                
            </div>
        </div>
        <!-- 员工资料 -->
        <div class="personinfo">
            <span>员工资料:</span>
            <select style="width:260px;height:40px;">
                    <option disabled >请选择</option>
                    <option value="1">深圳火影忍者有限公司</option>
                    <option value="2">深圳火影忍者有限公司</option>
            </select>
        </div>
        <div class="price">
            <div class="type">型号</div>
            <div class="number">张数</div>
            <p>价格说明:</p>
            <ul class="clearfix">
                <li class="one"></li>
                <li>小号</li>
                <li>中号</li>
                <li>大号</li>
                <li>特大号</li>
            </ul>
            <ul class="clearfix">
                <li>尺寸</li>
                <li>85x54mm(标准卡)</li>
                <li>100x70mm</li>
                <li>120x80mm</li>
                <li>140x100mm</li>
            </ul>
            <ul class="clearfix">
                <li></li>
                <li>标准厚度 加厚卡 芯片卡</li>
                <li>标准厚度 加厚卡</li>
                <li>标准厚度 加厚卡</li>
                <li>标准厚度 加厚卡</li>
            </ul>
            <ul class="clearfix">
                <li>1-30张</li>
                <li>1.9元/张 2.2元/张 5元/张</li>
                <li>1.9元/张 2.2元/张</li>
                <li>1.9元/张 2.2元/张</li>
                <li>1.9元/张 2.2元/张</li>
            </ul>
            <ul class="clearfix">
                <li>31-100张</li>
                <li>1.6元/张 1.9元/张 4元/张</li>
                <li>1.6元/张 1.9元/张</li>
                <li>1.6元/张 1.9元/张</li>
                <li>1.6元/张 1.9元/张</li>
            </ul>
            <ul class="last-ul clearfix">
                <li>101张以上</li>
                <li>1元/张 1.3元/张 3元/张</li>
                <li>1元/张 1.3元/张</li>
                <li>1元/张 1.3元/张</li>
                <li>1元/张 1.3元/张</li>
            </ul>
        </div>
        <div class="next">
            <div class="xiayibu">
                <p>模板价格: <b>￥</b> <span>5</span></p>
                <p>制卡单价: <b>￥</b> <span>12</span></p>
                <button>下一步</button>
            </div>
        </div>
    </div>
    <footer>
        <div class="wqb">
            <img src="../images/weixin.jpg" alt="">
            <img src="../images/weibo.jpg" alt="">
            <img src="../images/qq.jpg" alt="">
        </div>
        <div class="footer-info">
            <ul class="clearfix">
                <li><a href="javascript:void(0)">关于我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">联系我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">加入我们</a></li>
                <li>|</li>
                <li><a href="javascript:void(0)">商务合作</a></li>
            </ul>
            <p>版权所有&nbsp©&nbsp京ICP备14007358号-1 / 京公网安备11010802014104号</p>
        </div>
        <div class="erweima"><img src="../images/erweima.jpg" alt=""></div>
    </footer>

    <div class="selectTemplateBg" >
        <div class="selectTemplateAlert" >
            <div class="selectTemplateTitle">
                <a class="selectTemplate-a select-on" href="javascript:void(0)">我的模板</a>
                <a class="selectTemplate-a" href="javascript:void(0)">我喜欢的模板</a>
                <a class="selectTemplate-a" href="javascript:void(0)">我购买的模板</a>
            </div>
            <div class="templateList clearfix">
                <div class="templateRule fl">
                    <img src="../images/template-img01.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon mask-like-icon-on">
                                <li class="iconfont icon-kanguo"></li>
                            </div>
                            <div>预览</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板入场卡模板</div>
                    <div class="rule-details">
                        <span class="rule-coupons">129点券</span>
                        <span class="rule-watch">
                            <li class="iconfont icon-kanguo"></li>
                            1162
                        </span>
                        <span class="rule-like">
                            <li class="iconfont icon-xihuan"></li>
                            54
                        </span>
                    </div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img01.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-kanguo"></li>
                            </div>
                            <div>预览</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板入场卡模板</div>
                    <div class="rule-details">
                        <span class="rule-coupons">129点券</span>
                        <span class="rule-watch">
                            <li class="iconfont icon-kanguo"></li>
                            1162
                        </span>
                        <span class="rule-like">
                            <li class="iconfont icon-xihuan"></li>
                            54
                        </span>
                    </div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img01.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-kanguo"></li>
                            </div>
                            <div>预览</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板入场卡模板</div>
                    <div class="rule-details">
                        <span class="rule-coupons">129点券</span>
                        <span class="rule-watch">
                            <li class="iconfont icon-kanguo"></li>
                            1162
                        </span>
                        <span class="rule-like">
                            <li class="iconfont icon-xihuan"></li>
                            54
                        </span>
                    </div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img02.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-kanguo"></li>
                            </div>
                            <div>预览</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板</div>
                    <div class="rule-details">
                        <span class="rule-coupons">129点券</span>
                        <span class="rule-watch">
                            <li class="iconfont icon-kanguo"></li>
                            1162
                        </span>
                        <span class="rule-like">
                            <li class="iconfont icon-xihuan"></li>
                            54
                        </span>
                    </div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img02.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-kanguo"></li>
                            </div>
                            <div>预览</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板</div>
                    <div class="rule-details">
                        <span class="rule-coupons">129点券</span>
                        <span class="rule-watch">
                            <li class="iconfont icon-kanguo"></li>
                            1162
                        </span>
                        <span class="rule-like">
                            <li class="iconfont icon-xihuan"></li>
                            54
                        </span>
                    </div>
                </div>
                <div class="templateRule fl">
                    <img src="../images/template-img02.jpg" />
                    <div class="template-mask clearfix">
                        <div class="mask-like fl">
                            <div class="mask-like-icon">
                                <li class="iconfont icon-kanguo"></li>
                            </div>
                            <div>预览</div>
                        </div>
                        <div class="mask-use fl">
                            <div class="mask-use-icon">
                                <li class="iconfont icon-bianji"></li>
                            </div>
                            <div>使用</div>
                        </div>
                    </div>
                    <div class="rule-title">清爽白色员工卡入场卡模板</div>
                    <div class="rule-details">
                        <span class="rule-coupons">129点券</span>
                        <span class="rule-watch">
                            <li class="iconfont icon-kanguo"></li>
                            1162
                        </span>
                        <span class="rule-like">
                            <li class="iconfont icon-xihuan"></li>
                            54
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 预览 -->
    <div class="hide-container"></div>
    <div class="hide-content">
        <img src="../images/template-img01.jpg" alt="">
        <p class="hide-text">注意文字限制两行 蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工蓝色简洁清新名片卡公司员工</p>
        <p class="price"> <span class="money">129元</span>
            <span><i class="iconfont icon-kanguo">1662</i></span>
            <span class="num"><i class="iconfont icon-xihuan">54</i></span>
        </p>
        <div class="btn">
            <button>下载源文件</button>
            <button>立即使用</button>
        </div>
    </div>
</body>

<script src="../js/jquery.min.js"></script>
<script src="../js/head.js"></script>
<script>
    $(document).ready(function () {
        let clientHeight = $('html,body').height();
        $(".selectTemplateBg").height(clientHeight);

        $(".selectTemplateBg").click(function () {
            $(".selectTemplateBg").hide();
        })
        $(".sbt-info>button").click(function () {
            $('.selectTemplateBg').show();
        })
        //  预览区域 
        $('.mask-like .mask-like-icon').click(function(){
            var Height = $(document).scrollTop();
            $('.hide-content').css('margin-top',Height)
            $('.hide-content').show();
            $('.hide-container').show();
        })
        $('.hide-container').click(function(){
          $('.hide-container').hide();
          $('.hide-content').hide();
   })
     // 跳转 
      $('.xiayibu button').click(function(){
          window.location.href = 'payment.html'
      })

        /*阻止事件冒泡*/
        // function stopPropagation(e) {
        //     e = e || window.event;
        //     if (e.stopPropagation) { //W3C阻止冒泡方法
        //         e.stopPropagation();
        //     } else {
        //         e.cancelBubble = true; //IE阻止冒泡方法
        //     }
        // }

        // $(".selectTemplateBg *").click(function (e) {
        //     stopPropagation(e);
        // })
    })
</script>

</html>